<!DOCTYPE html>
{% load i18n static simpletags %}
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<!--
   The project use: django-simpleui
   source code：
   https://github.com/newpanjing/simpleui
-->
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    {% block title %}
        <title>{{ site_title }}-{% trans 'Log in' %}</title>
    {% endblock %}
    {% block icon %}
{#        <link rel="icon" href="{% static 'admin/simpleui-x/img/favicon.png' %}">#}
    {% endblock %}

    {% include 'admin/includes/css-part.html' %}

    {% block css %}
        <link rel="stylesheet" href="{% static 'admin/simpleui-x/css/login.css' %}?_=2.1">
        <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
        <style>
            /* 额外的科技风格样式 */
            .login-main::before {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                background: linear-gradient(45deg, #00ffff, #0066cc, #00ffff);
                border-radius: 15px;
                z-index: -1;
                animation: border-glow 3s ease-in-out infinite;
            }
            
            @keyframes border-glow {
                0%, 100% { opacity: 0.6; }
                50% { opacity: 1; }
            }
            
            /* 侧边装饰线条 */
            .side-lines {
                position: fixed;
                top: 0;
                bottom: 0;
                width: 2px;
                background: linear-gradient(to bottom, transparent, #00ffff, transparent);
                z-index: 5;
            }
            
            .side-lines.left {
                left: 5%;
                animation: pulse-line 4s ease-in-out infinite;
            }
            
            .side-lines.right {
                right: 5%;
                animation: pulse-line 4s ease-in-out infinite 2s;
            }
            
            @keyframes pulse-line {
                0%, 100% { 
                    opacity: 0.3;
                    box-shadow: 0 0 5px #00ffff;
                }
                50% { 
                    opacity: 1;
                    box-shadow: 0 0 20px #00ffff;
                }
            }
            
            /* 角落装饰 */
            .corner-decoration {
                position: fixed;
                width: 100px;
                height: 100px;
                border: 2px solid rgba(0, 255, 255, 0.4);
                z-index: 5;
            }
            
            .corner-decoration.top-left {
                top: 20px;
                left: 20px;
                border-right: none;
                border-bottom: none;
            }
            
            .corner-decoration.top-right {
                top: 20px;
                right: 20px;
                border-left: none;
                border-bottom: none;
            }
            
            .corner-decoration.bottom-left {
                bottom: 20px;
                left: 20px;
                border-right: none;
                border-top: none;
            }
            
            .corner-decoration.bottom-right {
                bottom: 20px;
                right: 20px;
                border-left: none;
                border-top: none;
            }
            
            /* 中心光晕效果 */
            .center-glow {
                position: fixed;
                top: 50%;
                left: 50%;
                width: 600px;
                height: 600px;
                background: radial-gradient(circle, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
                transform: translate(-50%, -50%);
                animation: center-pulse 6s ease-in-out infinite;
                z-index: 2;
                pointer-events: none;
            }
            
            @keyframes center-pulse {
                0%, 100% { 
                    transform: translate(-50%, -50%) scale(0.8);
                    opacity: 0.3;
                }
                50% { 
                    transform: translate(-50%, -50%) scale(1.2);
                    opacity: 0.6;
                }
            }
        </style>
    {% endblock %}
    {% block bg %}
        <style type="text/css">
            .bg {
                background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #0c0c0c 100%);
                min-height: 100vh;
                padding: 0;
                position: relative;
                overflow: hidden;
            }
            
            /* 科技网格背景 */
            .bg::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image: 
                    linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
                background-size: 50px 50px;
                animation: grid-move 20s linear infinite;
                z-index: 1;
            }
            
            /* 动态圆圈效果 */
            .bg::after {
                content: '';
                position: absolute;
                width: 300px;
                height: 300px;
                border: 2px solid rgba(0, 255, 255, 0.3);
                border-radius: 50%;
                top: 10%;
                right: 10%;
                animation: rotate 15s linear infinite;
                z-index: 2;
            }
            
            @keyframes grid-move {
                0% { transform: translate(0, 0); }
                100% { transform: translate(50px, 50px); }
            }
            
            @keyframes rotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            
            /* 浮动几何元素 */
            .floating-elements {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                pointer-events: none;
                z-index: 3;
            }
            
            .floating-element {
                position: absolute;
                border: 1px solid rgba(0, 255, 255, 0.4);
                animation: float 6s ease-in-out infinite;
            }
            
            .floating-element:nth-child(1) {
                width: 80px;
                height: 80px;
                top: 20%;
                left: 15%;
                animation-delay: 0s;
                border-radius: 50%;
            }
            
            .floating-element:nth-child(2) {
                width: 60px;
                height: 60px;
                top: 60%;
                right: 20%;
                animation-delay: 2s;
                transform: rotate(45deg);
            }
            
            .floating-element:nth-child(3) {
                width: 40px;
                height: 40px;
                top: 30%;
                right: 40%;
                animation-delay: 4s;
                border-radius: 50%;
            }
            
            .floating-element:nth-child(4) {
                width: 100px;
                height: 100px;
                bottom: 20%;
                left: 10%;
                animation-delay: 1s;
                transform: rotate(45deg);
            }
            
            @keyframes float {
                0%, 100% { transform: translateY(0px) rotate(0deg); }
                50% { transform: translateY(-20px) rotate(180deg); }
            }
            
            /* 数字雨效果 */
            .digital-rain {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 1;
            }
            
            .rain-drop {
                position: absolute;
                color: rgba(0, 255, 255, 0.6);
                font-family: 'Courier New', monospace;
                font-size: 14px;
                animation: rain 8s linear infinite;
            }
            
            @keyframes rain {
                0% {
                    transform: translateY(-100vh);
                    opacity: 0;
                }
                10% {
                    opacity: 1;
                }
                90% {
                    opacity: 1;
                }
                100% {
                    transform: translateY(100vh);
                    opacity: 0;
                }
            }
            
            /* 扫描线效果 */
            .scan-line {
                position: absolute;
                width: 100%;
                height: 2px;
                background: linear-gradient(90deg, transparent, #00ffff, transparent);
                top: 0;
                animation: scan 4s linear infinite;
                z-index: 4;
            }
            
            @keyframes scan {
                0% { top: 0; opacity: 1; }
                100% { top: 100%; opacity: 0; }
            }
        </style>
    {% endblock %}

    {% block head %}
        {# You can add code here. #}
    {% endblock %}
</head>
<body class="bg">
<!-- 科技背景效果 -->
<div class="floating-elements">
    <div class="floating-element"></div>
    <div class="floating-element"></div>
    <div class="floating-element"></div>
    <div class="floating-element"></div>
</div>

<!-- 数字雨效果 -->
<div class="digital-rain" id="digitalRain"></div>

<!-- 扫描线效果 -->
<div class="scan-line"></div>

<!-- 中心光晕效果 -->
<div class="center-glow"></div>

<!-- 侧边装饰线条 -->
<div class="side-lines left"></div>
<div class="side-lines right"></div>

<!-- 角落装饰 -->
<div class="corner-decoration top-left"></div>
<div class="corner-decoration top-right"></div>
<div class="corner-decoration bottom-left"></div>
<div class="corner-decoration bottom-right"></div>
{% block left %}
{% endblock %}
{% block main %}
    <div class="login-decorator" style="z-index: 10; position: relative;">
    <div class="login-main" style="
        background: rgba(0, 20, 40, 0.85);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 255, 255, 0.3);
        border-radius: 15px;
        padding: 40px;
        box-shadow: 
            0 0 30px rgba(0, 255, 255, 0.2),
            inset 0 0 30px rgba(0, 255, 255, 0.05);
        position: relative;
        overflow: hidden;
    ">
    {% block logo %}
        <div class="logo" style="
            position: relative;
            text-align: center;
            margin-bottom: 20px;
        ">
            <div style="
                width: 80px;
                height: 80px;
                margin: 0 auto 15px;
                border: 2px solid #00ffff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(0, 255, 255, 0.1);
                animation: pulse 2s ease-in-out infinite;
            ">
                {% if "SIMPLEUI_LOGO"|get_config %}
                    <img src="{{ "SIMPLEUI_LOGO"|get_config |safe }}" style="max-width: 60px; max-height: 60px;">
                {% else %}
                    <i class="fas fa-robot" style="font-size: 40px; color: #00ffff;"></i>
                {% endif %}
            </div>
        </div>
        <style>
            @keyframes pulse {
                0%, 100% { 
                    transform: scale(1);
                    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
                }
                50% { 
                    transform: scale(1.05);
                    box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
                }
            }
        </style>
    {% endblock %}

    {% block header %}
        <div class="header" style="
            text-align: center;
            color: #00ffff;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
            font-family: 'Orbitron', 'Arial', sans-serif;
            letter-spacing: 2px;
        ">{{ site_header }}</div>
    {% endblock %}

    {% block errors %}
        {% if form.non_field_errors %}
            {% for error in form.non_field_errors %}
                <el-alert
                        title="{{ error }}"
                        type="error">
                </el-alert>
            {% endfor %}
        {% endif %}
        {% if form.errors and not form.non_field_errors %}
            <p class="errornote">
                {% if form.errors.items|length == 1 %}
                    <el-alert title="{% trans "Please correct the error below." %}" type="error"></el-alert>
                {% else %}
                    <el-alert title="{% trans "Please correct the errors below." %}" type="error"></el-alert>
                {% endif %}
            </p>
        {% endif %}
    {% endblock %}
    {% block form %}
        <form class="simpleui-form" action="{{ app_path }}" method="post" id="login-form">
            {% csrf_token %}
            <div class="simpleui-input-inline" style="
                margin-bottom: 20px;
                position: relative;
            ">
                <el-input prefix-icon="fas fa-user" v-model="username" name="username"
                          placeholder="{% trans 'username' %}" autofocus
                          style="--el-input-bg-color: rgba(0, 40, 80, 0.3); --el-input-border-color: rgba(0, 255, 255, 0.4); --el-input-text-color: #00ffff; --el-input-placeholder-color: rgba(0, 255, 255, 0.6);"></el-input>
            </div>
            <div class="simpleui-input-inline" style="
                margin-bottom: 20px;
                position: relative;
            ">
                <el-input prefix-icon="fas fa-lock" type="password" v-model="password" name="password"
                          @keyup.enter.native="login()"
                          placeholder="{% trans 'password' %}" show-password
                          style="--el-input-bg-color: rgba(0, 40, 80, 0.3); --el-input-border-color: rgba(0, 255, 255, 0.4); --el-input-text-color: #00ffff; --el-input-placeholder-color: rgba(0, 255, 255, 0.6);"></el-input>
            </div>
            {% url 'admin_password_reset' as password_reset_url %}
              {% if password_reset_url %}

             <div class="password-reset-link" style="text-align: center; margin-top: 15px;">
                <a class="forgot-password" href="{{ password_reset_url }}" style="
                    color: rgba(0, 255, 255, 0.8);
                    text-decoration: none;
                    font-size: 14px;
                    transition: all 0.3s ease;
                ">{% trans 'Forgotten your password or username?' %}</a>
              </div>
              {% endif %}
            <div class="simpleui-input-inline login-btn" style="text-align: center; margin-top: 30px;">
                <el-button :icon="loading?'el-icon-loading':''" @click="login()"
                           type="primary" 
                           style="
                               background: linear-gradient(45deg, #0066cc, #00ffff);
                               border: 1px solid #00ffff;
                               color: #000;
                               font-weight: bold;
                               padding: 12px 40px;
                               border-radius: 25px;
                               box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
                               transition: all 0.3s ease;
                           "
                           @mouseover="$event.target.style.boxShadow = '0 0 30px rgba(0, 255, 255, 0.8)'"
                           @mouseout="$event.target.style.boxShadow = '0 0 20px rgba(0, 255, 255, 0.4)'">{% trans 'Log in' %}</el-button>
            </div>

            <input type="hidden" name="next" value="{{ next }}"/>
        </form>
    {% endblock %}
    </div>
</div>
{% endblock %}
{% include 'admin/includes/js-part.html' %}
{% block login_js %}
<script type="text/javascript" src="{% static 'admin/simpleui-x/js/login.js' %}?_=3.3"></script>
<script>
// 数字雨效果
function createDigitalRain() {
    const container = document.getElementById('digitalRain');
    const chars = '01ABCDEF一八幻影科技未来智能';
    const columns = Math.floor(window.innerWidth / 20);
    
    for (let i = 0; i < columns; i++) {
        const drop = document.createElement('div');
        drop.className = 'rain-drop';
        drop.style.left = i * 20 + 'px';
        drop.style.animationDelay = Math.random() * 8 + 's';
        drop.style.animationDuration = (Math.random() * 3 + 5) + 's';
        drop.textContent = chars[Math.floor(Math.random() * chars.length)];
        container.appendChild(drop);
        
        // 定期更新字符
        setInterval(() => {
            drop.textContent = chars[Math.floor(Math.random() * chars.length)];
        }, 500 + Math.random() * 1000);
    }
}

// 创建随机浮动光点
function createFloatingLights() {
    const body = document.body;
    
    for (let i = 0; i < 15; i++) {
        const light = document.createElement('div');
        light.style.cssText = `
            position: absolute;
            width: 4px;
            height: 4px;
            background: #00ffff;
            border-radius: 50%;
            box-shadow: 0 0 10px #00ffff;
            top: ${Math.random() * 100}%;
            left: ${Math.random() * 100}%;
            animation: float-light ${5 + Math.random() * 5}s ease-in-out infinite;
            animation-delay: ${Math.random() * 3}s;
            pointer-events: none;
            z-index: 3;
        `;
        body.appendChild(light);
    }
    
    // 添加浮动光点的CSS动画
    const style = document.createElement('style');
    style.textContent = `
        @keyframes float-light {
            0%, 100% {
                transform: translateY(0px) translateX(0px);
                opacity: 0.3;
            }
            25% {
                transform: translateY(-20px) translateX(10px);
                opacity: 1;
            }
            50% {
                transform: translateY(-10px) translateX(-15px);
                opacity: 0.7;
            }
            75% {
                transform: translateY(-30px) translateX(5px);
                opacity: 1;
            }
        }
    `;
    document.head.appendChild(style);
}

// 创建微粒效果
function createParticles() {
    const particleContainer = document.createElement('div');
    particleContainer.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    `;
    document.body.appendChild(particleContainer);
    
    for (let i = 0; i < 50; i++) {
        const particle = document.createElement('div');
        particle.style.cssText = `
            position: absolute;
            width: 2px;
            height: 2px;
            background: rgba(0, 255, 255, 0.6);
            top: ${Math.random() * 100}%;
            left: ${Math.random() * 100}%;
            animation: particle-float ${10 + Math.random() * 10}s linear infinite;
            animation-delay: ${Math.random() * 5}s;
        `;
        particleContainer.appendChild(particle);
    }
    
    const particleStyle = document.createElement('style');
    particleStyle.textContent = `
        @keyframes particle-float {
            0% {
                transform: translateY(100vh) translateX(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) translateX(${Math.random() * 200 - 100}px);
                opacity: 0;
            }
        }
    `;
    document.head.appendChild(particleStyle);
}

// 页面加载完成后初始化效果
document.addEventListener('DOMContentLoaded', function() {
    createDigitalRain();
    createFloatingLights();
    createParticles();
    
    // 为输入框添加聚焦效果
    setTimeout(() => {
        const inputs = document.querySelectorAll('.el-input__inner');
        inputs.forEach(input => {
            if (input) {
                input.addEventListener('focus', function() {
                    this.style.boxShadow = '0 0 15px rgba(0, 255, 255, 0.6)';
                    this.style.borderColor = '#00ffff';
                    this.style.backgroundColor = 'rgba(0, 40, 80, 0.4)';
                });
                
                input.addEventListener('blur', function() {
                    this.style.boxShadow = 'none';
                    this.style.borderColor = 'rgba(0, 255, 255, 0.4)';
                    this.style.backgroundColor = 'rgba(0, 40, 80, 0.3)';
                });
            }
        });
    }, 1000);
    
    // 为登录按钮添加点击效果
    setTimeout(() => {
        const loginBtn = document.querySelector('.login-btn .el-button');
        if (loginBtn) {
            loginBtn.addEventListener('click', function() {
                // 创建点击波纹效果
                const ripple = document.createElement('div');
                ripple.style.cssText = `
                    position: absolute;
                    width: 100px;
                    height: 100px;
                    background: radial-gradient(circle, rgba(0, 255, 255, 0.6) 0%, transparent 70%);
                    border-radius: 50%;
                    transform: scale(0);
                    animation: ripple-effect 0.6s ease-out;
                    pointer-events: none;
                    top: 50%;
                    left: 50%;
                    margin: -50px 0 0 -50px;
                `;
                
                this.style.position = 'relative';
                this.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                }, 600);
            });
        }
    }, 1000);
    
    // 添加点击波纹动画
    const rippleStyle = document.createElement('style');
    rippleStyle.textContent = `
        @keyframes ripple-effect {
            0% {
                transform: scale(0);
                opacity: 1;
            }
            100% {
                transform: scale(2);
                opacity: 0;
            }
        }
    `;
    document.head.appendChild(rippleStyle);
});

// 鼠标移动追踪效果
document.addEventListener('mousemove', function(e) {
    const trail = document.createElement('div');
    trail.style.cssText = `
        position: fixed;
        width: 6px;
        height: 6px;
        background: rgba(0, 255, 255, 0.4);
        border-radius: 50%;
        pointer-events: none;
        z-index: 999;
        left: ${e.clientX - 3}px;
        top: ${e.clientY - 3}px;
        animation: trail-fade 1s ease-out forwards;
    `;
    
    document.body.appendChild(trail);
    
    setTimeout(() => {
        trail.remove();
    }, 1000);
});

// 添加追踪效果动画
const trailStyle = document.createElement('style');
trailStyle.textContent = `
    @keyframes trail-fade {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(0);
            opacity: 0;
        }
    }
`;
document.head.appendChild(trailStyle);
</script>
{% endblock %}

{% block  particles %}
    {% if 'SIMPLEUI_LOGIN_PARTICLES'|get_config != False %}
        <!--
            Close login page particles see link:
            关闭登录页粒子动画请查看：
            https://github.com/newpanjing/simpleui/blob/master/QUICK.md#关闭登录页粒子动画
        -->
        <style type="text/css">
            #particles-js {
                position: fixed;
                top: 0px;
                left: 0px;
                right: 0px;
                bottom: 0px;
                z-index: -1;
            }
            .forgot-password {
                  margin-top: 10px;
                  color: rgba(0, 255, 255, 0.8);
                  text-decoration: none;
                }
                .forgot-password:hover,
                .forgot-password:active,
                .forgot-password:focus {
                    color: #00ffff;
                    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
                }
        </style>
        <!-- particles.js container -->
        <div id="particles-js"></div>
        <script type="text/javascript" src="{% static 'admin/simpleui-x/particles/particles.js' %}"></script>
        <script type="text/javascript" src="{% static 'admin/simpleui-x/particles/app.js' %}"></script>
    {% endif %}
{% endblock %}

</body>
</html>
